<template>
	<view class="page prize">
		<view class="mc-flex-center pct100" style="position: fixed;top: 0;left: 0;z-index: 99;background-color: #5c1de0;" :style="{ 'padding-top': statusBarHeight + 'px' }">
			<QS-tabs
				:tabs="tabs"
				:current="current"
				@change="tabChange"
				width="180"
				height="100"
				animationLineWidth="50"
				fontSize="40"
				activeColor="#ffffff"
				defaultColor="#a295ce"
			></QS-tabs>
		</view>
		<view style="padding-top: 100rpx;">
			<view v-if="current == 0" :style="{ 'margin-top': statusBarHeight + 'px' }"><draw-list :list="list"></draw-list></view>
			<view v-if="current == 1" style="margin-top: 334rpx;">
				<image src="../../../static/images/ui_kj_hd_bg.png" mode="widthFix" class="pa pct100"></image>
				<button
					form-type="submit"
					@click="popShow('CBargainRule')"
					class="formId-btn pa-r padding18 padding-left26 font-size25 color-white border-top-left-radius40 border-bottom-left-radius40"
					style="top:104rpx; background-color:#8853f9;"
					:style="{ 'margin-top': statusBarHeight + 'px' }"
				>
					活动规则
				</button>
				<view class="bg-color-white border-radius10 padding16 margin22" v-for="(item, index) in list" :key="item.prizeId">
					<bargain-list-item :item="item"></bargain-list-item>
				</view>
			</view>
		</view>
		<c-pop></c-pop>
	</view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import QSTabs from '@/components/QS-tabs/QS-tabs.vue';
import drawList from '@/components/home/draw-list/index.vue';
import bargainListItem from '@/components/home/bargain-list-item/index.vue';

let gData = {};
let _self;
export default {
	components: {
		QSTabs,
		drawList,
		bargainListItem
	},
	data() {
		return {
			statusBarHeight: 0,
			tabs: [
				{
					name: '抽奖'
				},
				{
					name: '砍价'
				}
			],

			status: 'more',
			InterstitialAd: null
		};
	},
	onLoad(options) {
		_self = this;
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		this.islogin();
		this.loadList();

		// uni.navigateTo({
		// 	url:'/pages/user/myBargain/myBargain'
		// })
		// uni.navigateTo({
		// 	url:'/pages/bargain/details/details?bargainPartakeId=7'
		// })
	},
	onShow() {
		this.createInterstitialAd();
		if (gData.isNoFirst) {
			if (this.current == 1) {
				this.loadList();
			}
		} else {
			gData.isNoFirst = true;
		}
	},
	onUnload() {
		gData = {}; /*因为全局变量会保存，再次打开该页面时会造成一些数据错误 */
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.loadList();
		uni.stopPullDownRefresh();
	},
	// 上拉加载
	onReachBottom() {},
	onShareAppMessage(res) {
		const num = Math.floor(Math.random() * 6 + 1);
		console.log(num);
		let title = '答题赢Q币和荣耀皮肤，几率极高，快来试试';
		let path = '/pages/tabBar/home/index?shareUserId=' + this._gameInfo.userId;
		let imageUrl = 'https://miaozhua-test.oss-cn-hangzhou.aliyuncs.com/luckKing/icon/share' + num + '.jpg';
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log('onShareAppMessage', res);
			const data = res.target.dataset;
			const prizeId = data.id;
			const prizeName = data.name;
			path = '/pages/draw/details/details?shareUserId=' + this._gameInfo.userId + '&prizeId=' + prizeId;
			imageUrl = data.url;
			title = '快来抢！这里免费送你' + prizeName + '皮肤一套，先到先得';
		}
		return {
			title,
			path,
			imageUrl
		};
	},
	computed: {
		...mapGetters('user', ['_isLogin', '_gameInfo']),
		...mapGetters('draw', ['_drawList', '_bargainList']),
		...mapGetters('common', {
			current: '_tabCurrent2'
		}),
		list: function() {
			if (this.current == 0) {
				return this._drawList;
			} else if (this.current == 1) {
				return this._bargainList;
			}
		}
	},
	methods: {
		...mapActions('user', ['gameInfoUp']),
		...mapActions('pop', ['popShow']),
		...mapActions('common', ['tabCurrent2Up']),
		...mapActions('draw', ['bargainListLoad', 'drawListLoad']),
		...mapGetters('InterstitialAd', ['_pageName']),
		tabChange(current) {
			this.tabCurrent2Up(current);
			this.loadList();
		},
		loadList() {
			if (this.current == 0) {
				this.loadDrawList();
			} else if (this.current == 1) {
				this.loadBargainList();
			}
		},
		// 加载列表
		async loadDrawList() {
			this.drawListLoad();
		},
		async loadBargainList() {
			this.bargainListLoad();
		},
		islogin() {
			if (!this._isLogin) {
				uni.reLaunch({
					url: '/pages/authorize/index'
				});
			} else if (!this._gameInfo) {
				this.gameInfoUp();
			}
		},
		//创建插屏广告
		async createInterstitialAd() {
			const pageName='tabBarDraw'
			if(!this.InterstitialAd || this._pageName != pageName){
				await this.$store.dispatch('InterstitialAd/destroy');
				this.InterstitialAd = qq.createInterstitialAd({
					adUnitId: '1e9e1454c766205f778256de22e4bebf'
				});
				this.$store.dispatch('InterstitialAd/init', {
					InterstitialAd:this.InterstitialAd,
					pageName
				});
			}
		},
		// ---------------------------------------
		// 保存二维码
		setFormId(e) {
			this.$store.dispatch('common/formIdListUp', {
				e: e,
				isSave: true
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.prize {
	background-color: #581ae1;
	color: #555555;
	font-size: 32rpx;
}

.list-no-data {
	image {
		display: block;
		width: 260rpx;
		margin: 160rpx auto 60rpx;
	}

	text {
		display: block;
		width: 100%;
		color: white;
		text-align: center;
		font-size: 28rpx;
		opacity: 0.8;
	}
}
</style>
